<template>
  <div data-server-rendered="true" id="__nuxt">
    <!---->
    <div id="__layout">
      <div>
        <div class="home" data-v-37dffbed>
          <div class="productDetail indexChild" data-v-472d0f82 data-v-37dffbed>
            <div class="productDetailBox" data-v-472d0f82>
              <div class="detailBox" data-v-472d0f82>
                <div class="topDetail" data-v-472d0f82>
                  <div class="imgScrollBox" data-v-472d0f82>
                    <img class="mainPicBig" data-v-472d0f82 :src="src" />
                    <div class="smallImgBox" data-v-472d0f82>
                      <img
                        data-v-472d0f82
                        class="smallImg"
                        v-for="(item,index) in allsrc"
                        :key="index"
                        :src="item"
                        @mouseover="imgmouseover(index)"
                        style="cursor:pointer;"
                      />
                    </div>
                  </div>
                  <div class="topDetailR" data-v-472d0f82>
                    <div class="top" data-v-472d0f82>
                      <p class="productName" data-v-472d0f82>{{list.title}}</p>
                      <p class="productSummer" data-v-472d0f82>{{list.description}}</p>
                      <div class="priceWeight topRows" data-v-472d0f82>
                        <div class="price rows" data-v-472d0f82>
                          <span data-v-472d0f82>价格</span>
                          <em data-v-472d0f82>￥{{list.price}}</em>
                        </div>
                        <div class="weight rows" data-v-472d0f82>
                          <span data-v-472d0f82>重量</span>
                          <strong data-v-472d0f82>{{list.weight}}kg</strong>
                        </div>
                      </div>
                      <div class="socketNum topRows" data-v-472d0f82>
                        <div class="socket rows" data-v-472d0f82>
                          <span data-v-472d0f82>库存</span>
                          <strong data-v-472d0f82>库存{{list.stockNum}}件</strong>
                        </div>
                        <div class="num rows" data-v-472d0f82>
                          <span data-v-472d0f82>数量</span>
                          <strong class="flex" data-v-472d0f82>
                            <div data-v-34e4c1b9 data-v-472d0f82>
                              <!---->
                              <div class="numberCountVertical" data-v-34e4c1b9>
                                <input
                                  type="number"
                                  value="1"
                                  class="countNumInputVer"
                                  data-v-34e4c1b9
                                />
                                <div class="countRight" data-v-34e4c1b9>
                                  <i class="el-icon-caret-top up" data-v-34e4c1b9></i>
                                  <i class="el-icon-caret-bottom down" data-v-34e4c1b9></i>
                                </div>
                              </div>
                            </div>
                            <span class="single" data-v-472d0f82>件</span>
                          </strong>
                        </div>
                      </div>
                    </div>
                    <div class="bottom" data-v-472d0f82>
                      <span data-v-472d0f82>
                        <div
                          role="tooltip"
                          id="el-popover-8432"
                          aria-hidden="true"
                          class="el-popover el-popper el-popover--plain"
                          style="width:256px;display:none;"
                        >
                          <div class="el-popover__title">低价采购是指：</div>当您对某商品有大量需求时，为避免您要用的时候被其他客户下单，您可以提前购买，保障足够的库存。同时所购商品还能获得折扣。
                        </div>
                        <div class="questions" data-v-472d0f82>
                          <span class="whatBuy" data-v-472d0f82>
                            <i class="iconfont iconquestion_nor qIcon" data-v-472d0f82></i>
                            <strong data-v-472d0f82>什么是预购</strong>
                          </span>
                        </div>
                      </span>
                      <div class="buttonB" data-v-472d0f82>
                        <button class="adviceBuy button" data-v-472d0f82>预购</button>
                        <button class="joinCar button" data-v-472d0f82 @click="increase">加入购物车</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="detailList" data-v-472d0f82>
                  <div class="title" data-v-472d0f82>
                    <span data-v-472d0f82>商品详情</span>
                  </div>
                  <!---->
                  <ul class="listBox" data-v-472d0f82>
                    <li class="detailItem" data-v-472d0f82>
                      <span data-v-472d0f82>暂无参数</span>
                    </li>
                  </ul>
                </div>
                <!-- 商品详情 -->
                 <div class="detailHtml" data-v-472d0f82 v-html="lists">
                </div>
              </div>
              <div class="newHotWrap" data-v-472d0f82>
                <div class="newHot" data-v-472d0f82>
                  <div class="newBox newHotRight" data-v-472d0f82>
                    <div class="title" data-v-472d0f82>
                      <strong data-v-472d0f82>新品上市</strong>
                    </div>
                    <!-- 新品 -->
                    <NewProducts :id="1"></NewProducts>
                  </div>
                  <div class="hotBox newHotRight" data-v-472d0f82>
                    <div class="title" data-v-472d0f82>
                      <strong data-v-472d0f82>热门销量推荐</strong>
                    </div>
                    <!-- 热门商品 -->
                    <NewProducts :id="0"></NewProducts>
                  </div>
                </div>
                <a href="#__layout" class="backTop" data-v-472d0f82>
                  <i class="el-icon-arrow-up topIcon" data-v-472d0f82></i>
                  <span class="topText" data-v-472d0f82>回至顶部</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NewProducts from "@/components/NewProducts";
export default {
  components: {
    NewProducts
  },
  data() {
    return {
      list: [],
      id: 1,
      i: 1,
      num: 0,
      src: "",
      allsrc: [],
      productId: "",
      lists:""
    };
  },
  created() {
    let idx = this.$route.params.id;
    console.log(idx)
    idx=idx.split(",")
    this.id = idx[0];
    this.i = idx[1];
    this.num = idx[2];
    let url = "";
    let url1='/api/productSet/getProductDetailByProductId'
    let data = {};
    var data1={}
    if (this.num == 1) {
      url = "/api/productSet/getProductListSeller";
      data = {
        canUseAccount: "",
        currPageNo: 1,
        isPublic: "1",
        limit: 30,
        productProhibitedState: "",
        sortField: "sort_index",
        sortType: "asc",
        tagList: [this.id],
        title: ""
      };
      this.$axios.post(url, data).then(res => {
        this.list = res.data.data.datas[this.i];
        this.productId = this.list.productId;
        this.src = this.list.picList.slice(2, -2);
        this.allsrc = this.list.picsListAll.slice(2, -2).split('","');
        data1={"productId":this.productId}
        this.$axios.post(url1,data1).then((ress)=> {
            this.lists=ress.data.data.productDetail
           
         })
      });
    } else if (this.num == 0) {
      url = "/api/productSet/getHotAndNewProduct";
      data = {
        type: this.id
      };
      this.$axios.post(url, data).then(res => {
        this.list = res.data.data[this.i];
        this.productId = this.list.productId;
        this.src = this.list.picUrl;
        data1={"productId":this.productId}
        this.$axios.post(url1,data1).then((ress)=> {
            this.lists=ress.data.data.productDetail
         })
      });
    }
  },
  methods: {
    increase() {
      var obj={}
      if (this.num == 1) {
        this.list.n = 1;
         obj = this.list;
        this.$store.commit("increasedata", obj);
      } else {
        this.list.n = 0;
        obj= this.list;
        this.$store.commit("increasedata", obj);
      }
    },
    imgmouseover(id) {
      this.src = this.allsrc[id];
    }
  }
};
</script>

<style>
.tables {
  padding: 12px;
  background: #fff;
}

.tables ::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  display: block;
}

.tables ::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: hsla(0, 0%, 53.3%, 0.4);
}

.tables ::-webkit-scrollbar-thumb:hover {
  background: #888;
}

.joinShopCarAnimation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  z-index: 999999;
  transition: all 1s;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
}

.pager {
  text-align: center;
  margin-top: 40px;
}

.minWidthBox {
  width: 1260px;
  margin: 0 auto;
  transition: all 0.2s;
}

.inputWidth {
  width: 220px;
}

.filterBox {
  padding: 20px 12px 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
  background: #fff;
}

.filterBox .filterItem {
  margin-right: 20px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.filterBox .filterItem .filterTime {
  width: 224px;
}

.filterBox .filterItem .filterSelect {
  width: 160px;
}

.filterBox .filterItem .filterInput {
  width: 160px;
  font-size: 12px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 400;
}

.filterBox .filterItem .filterInput .el-input__inner {
  padding: 0 8px;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, 微软雅黑, Arial, sans-serif;
}

.filterBox .filterItem .filterSearch {
  width: 100px;
  height: 32px;
  background: #f64f6f;
  font-size: 14px;
  line-height: 24px;
  color: #fff;
  font-weight: 400;
  border-radius: 2px;
}

.filterBox .filterItem .filterExport {
  width: 100px;
  height: 32px;
  font-size: 14px;
  line-height: 24px;
  color: #f64f6f;
  font-weight: 400;
  border-radius: 2px;
  border: 1px solid #f64f6f;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin-left: 15px;
}

.formAlertInput,
.formAlertSelect {
  width: 230px;
}

.formAlertTextArea {
  width: 280px;
}

.threeLine {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 70px;
}

@media screen and (min-width: 1400px) {
  #__nuxt .HeadTitleBox {
    min-width: 1260px;
  }

  #__nuxt .HeadTitleBox .HeadTitle {
    width: 1260px;
  }

  #__nuxt .footerBox {
    min-width: 1260px;
  }

  #__nuxt .footerBox .minWidthBox,
  #__nuxt .userCenter .userCenterBox {
    width: 1260px;
  }
}

@media screen and (min-width: 1600px) {
  #__nuxt .HeadTitleBox {
    min-width: 1360px;
  }

  #__nuxt .HeadTitleBox .HeadTitle {
    width: 1360px;
  }

  #__nuxt .footerBox {
    min-width: 1360px;
  }

  #__nuxt .footerBox .minWidthBox,
  #__nuxt .userCenter .userCenterBox {
    width: 1360px;
  }
}

@media screen and (min-width: 1800px) {
  #__nuxt .HeadTitleBox {
    min-width: 1460px;
  }

  #__nuxt .HeadTitleBox .HeadTitle {
    width: 1460px;
  }

  #__nuxt .footerBox {
    min-width: 1460px;
  }

  #__nuxt .footerBox .minWidthBox,
  #__nuxt .userCenter .userCenterBox {
    width: 1460px;
  }
}

.button-text {
  color: #f64f6f;
}

.button-text,
.button-text-g {
  cursor: pointer;
  font-size: 12px;
  line-height: 22px;
  display: inline-block;
  white-space: nowrap;
  margin: 0 6px;
}

.button-text-g {
  color: rgba(0, 0, 0, 0.45);
}

.button-text-red {
  font-size: 12px;
  line-height: 22px;
  color: #f5222d;
  margin: 0 6px;
}

.button-n,
.button-text-red {
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
}

.button-n {
  font-size: 14px;
  line-height: 38px;
  color: #fff;
  background: #f64f6f;
  padding: 0 32px;
  border: 1px solid #f64f6f;
  transition: all 0.3s;
  border-radius: 2px;
}

.button-n:hover {
  opacity: 0.8;
}

.button-m {
  cursor: pointer;
  width: 100px;
  height: 32px;
  background: #f64f6f;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  font-weight: 400;
  border-radius: 2px;
}

.button-m:hover {
  opacity: 0.8;
}

.button-b {
  cursor: pointer;
  width: 100px;
  height: 32px;
  background: #fff1f4;
  font-size: 14px;
  line-height: 20px;
  color: #ff4d70;
  font-weight: 400;
  border-radius: 2px;
  border: 1px solid #ff9aad;
}

.button-b:hover {
  opacity: 0.8;
}

.button-m-w {
  cursor: pointer;
  width: 100px;
  height: 32px;
  font-size: 16px;
  line-height: 24px;
  color: #f64f6f;
  font-weight: 400;
  border-radius: 2px;
  border: 1px solid #f64f6f;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.button-g {
  line-height: 32px;
  background: #f5f7fa;
  padding: 0 16px;
}

.button-g,
.button-w {
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  color: #4d6780;
  border: 1px solid #d3dae0;
}

.button-w {
  line-height: 38px;
  padding: 0 32px;
  white-space: nowrap;
}

.button-y {
  font-size: 14px;
  line-height: 32px;
  padding: 0 16px;
  background: #faad14;
  border: 1px solid #faad14;
}

.button-s,
.button-y {
  cursor: pointer;
  display: inline-block;
  color: #fff;
}

.button-s {
  font-size: 12px;
  line-height: 20px;
  background: #f64f6f;
  padding: 0 10px;
  border: 1px solid #f64f6f;
  border-radius: 4px;
  margin: 0 10px;
  transition: all 0.3s;
}

.button-s:hover {
  opacity: 0.8;
}

.button-l {
  width: 100%;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 40px;
  color: #fff;
  background: #f64f6f;
  border-radius: 4px;
  transition: all 0.3s;
  letter-spacing: 6px;
}

.button-l:hover {
  opacity: 0.8;
}

button {
  transition: all 0.2s;
  box-sizing: border-box;
  background: transparent;
  font-size: 14px;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, 微软雅黑, Arial, sans-serif;
}

button:hover {
  opacity: 0.8;
}

button:disabled {
  background-color: #d9d9d9 !important;
  border-color: #d9d9d9 !important;
  cursor: not-allowed;
}

.formAlert .inputWidth {
  width: 240px;
}

.formAlert .textareaInp {
  width: 340px;
}

.formAlert .textKey {
  font-size: 14px;
  line-height: 20px;
  color: #666;
  font-weight: 400;
  font-weight: 700;
}

.el-table {
  border-right: 1px solid #eee !important;
}

.el-table th.is-leaf {
  background: rgba(0, 0, 0, 0.03) !important;
  color: #000;
  font-weight: 700;
}

.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right-style: dashed;
}

.el-checkbox__inner:hover,
.el-checkbox__input.focus .el-checkbox__inner,
.el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #ff97ab !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #ff4d70 !important;
  border-color: #ff97ab !important;
}

.el-checkbox + .el-checkbox {
  margin: 0;
}

.el-radio__input.is-checked .el-radio__inner {
  border-color: #ff4d70 !important;
  background: #ff4d70 !important;
}

.el-radio__inner:hover {
  border-color: #ff4d70 !important;
}

.el-table {
  border: 1px solid #eee;
}

.el-table td {
  border-bottom: none;
}

.el-table th.is-leaf {
  background: #fafafa;
  border-bottom: 1px solid #eee;
}

.el-form-item__label {
  font-size: 10px !important;
  color: rgba(0, 0, 0, 0.35) !important;
}

body.el-loading-parent--relative {
  position: static !important;
}

.el-input__inner {
  border-radius: 2px;
  font-size: 12px;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, 微软雅黑, Arial, sans-serif;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  color: #f64f6f !important;
  background-color: #fff !important;
}

.el-input.is-active .el-input__inner,
.el-input__inner:focus,
.el-textarea__inner:focus {
  outline: 0 !important;
  border-color: #f64f6f !important;
}

.el-input.is-exceed .el-input__suffix .el-input__count {
  color: #f56c6c !important;
}

.el-tag,
.el-tag .el-icon-close {
  color: #f64f6f !important;
}

.el-tag .el-icon-close:hover {
  background-color: #f64f6f !important;
}

.el-select-dropdown__item.selected {
  color: #f64f6f !important;
  font-weight: 700 !important;
}

.el-select .el-input.is-focus .el-input__inner,
.el-select .el-input__inner:focus {
  border-color: #f64f6f !important;
}

.el-pagination button:hover {
  color: #f64f6f !important;
}

.el-pagination__sizes .el-input .el-input__inner:hover {
  border-color: #f64f6f !important;
}

.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #f64f6f !important;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #f64f6f !important;
  color: #fff !important;
}

.el-pager li {
  height: 24px;
  line-height: 23px;
}

.el-pager li.active,
.el-pager li:hover {
  color: #f64f6f !important;
}

.el-pagination button:disabled {
  background: transparent !important;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  min-width: 24px;
}

.el-pagination button,
.el-pagination span:not([class*="suffix"]) {
  height: 24px;
  line-height: 23px;
}

.upload-demo .el-upload-dragger {
  width: 200px;
  height: 100px;
}

.el-carousel__arrow {
  width: 60px;
  height: 60px;
  font-size: 30px;
  background-color: rgba(0, 0, 0, 0.1);
}

.el-carousel__arrow--left {
  left: 50px;
}

.el-carousel__arrow--right {
  right: 50px;
}

.el-button--text {
  color: #f64f6f;
}

.el-button.is-plain:focus,
.el-button.is-plain:hover {
  border-color: #f64f6f;
  color: #f64f6f;
}

.el-range-editor.is-active,
.el-range-editor.is-active:hover {
  border-color: #f64f6f;
}

.el-date-table td.current:not(.disabled) span,
.el-date-table td.end-date span,
.el-date-table td.start-date span {
  background-color: #f64f6f;
}

.el-date-table td.available:hover,
.el-date-table td.today span {
  color: #f64f6f;
}

.el-range-editor--small .el-range-input {
  font-size: 12px;
}

.el-tooltip__popper {
  max-width: 300px;
  line-height: 18px;
}

.fixedOrder .el-input__inner {
  background: transparent;
  color: #fff;
}

.fixedOrder .topTitleBox input::-webkit-input-placeholder {
  color: #fff !important;
}

.nuxt-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  width: 0;
  opacity: 1;
  transition: width 0.1s, opacity 0.4s;
  background-color: #1c7344;
  z-index: 999999;
}

.nuxt-progress.nuxt-progress-notransition {
  transition: none;
}

.nuxt-progress-failed {
  background-color: red;
}

.home[data-v-37dffbed] {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home .indexChild[data-v-37dffbed] {
  min-height: 600px;
  margin-top: 50px;
}

.home .topTitle[data-v-37dffbed] {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 998;
  opacity: 1;
  -webkit-animation: slideup-data-v-37dffbed 0.5s linear;
  animation: slideup-data-v-37dffbed 0.5s linear;
}

@-webkit-keyframes slideup-data-v-37dffbed {
  0% {
    opacity: 0;
    top: -68px;
  }

  to {
    opacity: 1;
    top: 0;
  }
}

@keyframes slideup-data-v-37dffbed {
  0% {
    opacity: 0;
    top: -68px;
  }

  to {
    opacity: 1;
    top: 0;
  }
}

.home .fixedTitle[data-v-37dffbed] {
  position: fixed;
  -webkit-animation: sildedown-data-v-37dffbed 0.5s linear;
  animation: sildedown-data-v-37dffbed 0.5s linear;
}

@-webkit-keyframes sildedown-data-v-37dffbed {
  0% {
    top: -68px;
  }

  to {
    top: 0;
  }
}

@keyframes sildedown-data-v-37dffbed {
  0% {
    top: -68px;
  }

  to {
    top: 0;
  }
}

.HeadTitleBox[data-v-772035bb] {
  height: 50px;
  background: #fff;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  min-width: 1260px;
}

.HeadTitleBox .HeadTitle[data-v-772035bb] {
  width: 1260px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s;
}

.HeadTitleBox .HeadTitle .logoBox[data-v-772035bb] {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  cursor: pointer;
}

.HeadTitleBox .HeadTitle .logoBox .logoImg[data-v-772035bb] {
  width: 40px;
  height: 40px;
  margin-right: 6px;
}

.HeadTitleBox .HeadTitle .logoBox .logoName[data-v-772035bb] {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  align-items: flex-start;
  max-width: 180px;
}

.HeadTitleBox .HeadTitle .logoBox .logoName strong[data-v-772035bb] {
  font-size: 24px;
  line-height: 30px;
  color: #000;
  font-weight: 400;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.HeadTitleBox .HeadTitle .logoBox .logoName span[data-v-772035bb] {
  font-size: 12px;
  line-height: 14px;
  color: #666;
  font-weight: 400;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.HeadTitleBox .HeadTitle .navBox[data-v-772035bb] {
  height: 100%;
  flex: 1;
  display: flex;
  margin-left: 50px;
}

.HeadTitleBox .HeadTitle .navBox .alinks[data-v-772035bb] {
  min-width: 40px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin: 0 40px;
}

.HeadTitleBox .HeadTitle .navBox .alinks span[data-v-772035bb] {
  font-size: 16px;
  line-height: 22px;
  color: #666;
  font-weight: 400;
}

.HeadTitleBox .HeadTitle .navBox .toMakeOrder[data-v-772035bb] {
  min-width: 120px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin: 0 40px;
}

.HeadTitleBox .HeadTitle .navBox .toMakeOrder .iconqiche[data-v-772035bb] {
  font-size: 18px;
  line-height: 1;
  color: #ff4d70;
  font-weight: 400;
  margin-right: 6px;
}

.HeadTitleBox .HeadTitle .navBox .toMakeOrder span[data-v-772035bb] {
  font-size: 16px;
  line-height: 1;
  color: #ff4d70;
  font-weight: 700;
}

.HeadTitleBox .HeadTitle .navBox .active[data-v-772035bb] {
  position: relative;
}

.HeadTitleBox .HeadTitle .navBox .active[data-v-772035bb]:after {
  content: "";
  width: 100%;
  height: 3px;
  background: #f64f6f;
  position: absolute;
  bottom: 0;
  left: 0;
}

.HeadTitleBox .HeadTitle .navBox .active span[data-v-772035bb] {
  color: #f64f6f;
}

.HeadTitleBox .HeadTitle .loginStatus[data-v-772035bb] {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.HeadTitleBox .HeadTitle .loginStatus .noLogin[data-v-772035bb] {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 6px;
}

.HeadTitleBox .HeadTitle .loginStatus .toLogin[data-v-772035bb] {
  font-size: 14px;
  line-height: 18px;
  color: #ff4d70;
  font-weight: 400;
  cursor: pointer;
}

.HeadTitleBox .HeadTitle .loginStatus .toReg[data-v-772035bb] {
  font-size: 14px;
  line-height: 18px;
  color: #666;
  font-weight: 400;
  cursor: pointer;
}

.HeadTitleBox .formAlert .getCodeBox[data-v-772035bb] {
  display: flex;
  align-items: center;
  width: 240px;
}

.HeadTitleBox .formAlert .getCodeBox .inputWidthCode[data-v-772035bb] {
  flex: 1;
}

.HeadTitleBox .formAlert .getCodeBox .getCode[data-v-772035bb] {
  width: 100px;
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  margin-left: 10px;
}

.HoverBox[data-v-65500da1] {
  position: relative;
}

.HoverBox .slotCont[data-v-65500da1] {
  cursor: pointer;
}

.HoverBox .listBox[data-v-65500da1] {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px 1px rgba(255, 151, 171, 0.2);
  z-index: 999;
}

.HoverBox .listBox[data-v-65500da1]:before {
  content: "";
  width: 100%;
  height: 12px;
  position: absolute;
  top: -12px;
  left: 0;
}

.HoverBox .listBox li[data-v-65500da1] {
  height: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 15px;
  cursor: pointer;
  transition: all 0.2s;
}

.HoverBox .listBox li[data-v-65500da1]:hover {
  background: #f64f6f;
}

.HoverBox .listBox li:hover i[data-v-65500da1],
.HoverBox .listBox li:hover span[data-v-65500da1] {
  color: hsla(0, 0%, 100%, 0.85);
}

.HoverBox .listBox li i[data-v-65500da1] {
  font-size: 16px;
  margin-right: 12px;
}

.HoverBox .listBox li i[data-v-65500da1],
.HoverBox .listBox li span[data-v-65500da1] {
  line-height: 1;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 400;
}

.HoverBox .listBox li span[data-v-65500da1] {
  font-size: 14px;
}

.customAlert[data-v-70d8f6d7] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
  overflow: auto;
  box-sizing: border-box;
}

.customAlert .customBox[data-v-70d8f6d7] {
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  min-height: 100px;
  box-sizing: border-box;
  padding: 30px 14px;
  position: relative;
  margin: 0 auto 150px;
  top: 150px;
}

.customAlert .customBox .close[data-v-70d8f6d7] {
  padding: 16px;
  font-size: 16px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 700;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}

.customAlert .customBox .footer[data-v-70d8f6d7] {
  margin: 30px 0 0;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}

.customAlert .customBox .footer .buttonItem[data-v-70d8f6d7] {
  min-width: 100px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin: 0 50px;
  border-radius: 2px;
  box-sizing: border-box;
}

.customAlert .customBox .footer .cancel[data-v-70d8f6d7] {
  border: 1px solid rgba(0, 0, 0, 0.25);
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.25);
  font-weight: 400;
  background: #fff;
}

.customAlert .customBox .footer .sureBtn[data-v-70d8f6d7] {
  background: #f64f6f;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  font-weight: 400;
}

.customAlert .noPadding[data-v-70d8f6d7] {
  padding: 0;
}

.productDetail[data-v-472d0f82] {
  background: #fff;
}

.productDetail .productDetailBox[data-v-472d0f82] {
  width: 1260px;
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
}

.productDetail .productDetailBox .detailBox[data-v-472d0f82] {
  flex: 1;
  padding-right: 10px;
  border-right: 1px solid #eee;
}

.productDetail .productDetailBox .detailBox .topDetail[data-v-472d0f82] {
  margin-bottom: 20px;
  display: flex;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .imgScrollBox[data-v-472d0f82] {
  margin-right: 20px;
  display: flex;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .imgScrollBox
  .mainPicBig[data-v-472d0f82] {
  width: 312px;
  height: 312px;
  margin-right: 3px;
  opacity: 1;
  transition: all 0.2s;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .imgScrollBox
  .smallImgBox[data-v-472d0f82] {
  display: flex;
  flex-direction: column;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .imgScrollBox
  .smallImgBox
  .smallImg[data-v-472d0f82] {
  width: 60px;
  height: 60px;
  margin-bottom: 3px;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .imgScrollBox
  .smallImgBox
  .smallImg[data-v-472d0f82]:last-child {
  margin-bottom: 0;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR[data-v-472d0f82] {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .top
  .productName[data-v-472d0f82] {
  font-size: 16px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
  margin-bottom: 2px;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .top
  .productSummer[data-v-472d0f82] {
  font-size: 14px;
  line-height: 20px;
  color: #f64f6f;
  font-weight: 400;
  margin-bottom: 15px;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .top
  .priceWeight[data-v-472d0f82] {
  background: url(../assets/image/9c1385517cbc8860981a2e72e3ad310f.jpg)
    no-repeat;
  margin-bottom: 16px;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .top
  .topRows[data-v-472d0f82] {
  padding: 0 10px;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .top
  .topRows
  .rows[data-v-472d0f82] {
  height: 32px;
  display: flex;
  align-items: center;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .top
  .topRows
  .rows
  .flex[data-v-472d0f82] {
  display: flex;
  align-items: center;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .top
  .topRows
  .rows
  span[data-v-472d0f82] {
  font-size: 12px;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.25);
  font-weight: 700;
  width: 90px;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .top
  .topRows
  .rows
  em[data-v-472d0f82] {
  font-size: 20px;
  line-height: 28px;
  color: #f64f6f;
  font-weight: 700;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .top
  .topRows
  .rows
  strong[data-v-472d0f82] {
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 400;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .top
  .topRows
  .rows
  strong
  .single[data-v-472d0f82] {
  margin-left: 20px;
  font-size: 12px;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 400;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .top
  .topRows
  .socket[data-v-472d0f82] {
  margin-bottom: 16px;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .bottom[data-v-472d0f82] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .bottom
  .questions[data-v-472d0f82] {
  margin-bottom: 6px;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .bottom
  .questions
  .whatBuy[data-v-472d0f82] {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .bottom
  .questions
  .whatBuy
  .qIcon[data-v-472d0f82] {
  font-size: 14px;
  line-height: 1;
  color: #ff4d70;
  font-weight: 400;
  margin-right: 4px;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .bottom
  .questions
  .whatBuy
  strong[data-v-472d0f82] {
  font-size: 12px;
  line-height: 18px;
  color: #ff4d70;
  font-weight: 400;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .bottom
  .buttonB[data-v-472d0f82] {
  display: flex;
  align-items: center;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .bottom
  .buttonB
  .button[data-v-472d0f82] {
  width: 180px;
  height: 40px;
  box-sizing: border-box;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .bottom
  .buttonB
  .adviceBuy[data-v-472d0f82] {
  font-size: 14px;
  line-height: 20px;
  color: #ff4d70;
  font-weight: 400;
  background: #fff1f1;
  border: 1px solid #ff4d70;
  margin-right: 20px;
}

.productDetail
  .productDetailBox
  .detailBox
  .topDetail
  .topDetailR
  .bottom
  .buttonB
  .joinCar[data-v-472d0f82] {
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  font-weight: 400;
  background: #f64f6f;
  border: 1px solid #fd849b;
}

.productDetail .productDetailBox .detailBox .detailList[data-v-472d0f82] {
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

.productDetail
  .productDetailBox
  .detailBox
  .detailList
  .title[data-v-472d0f82] {
  height: 30px;
  padding: 0 10px;
  background: #fafafa;
  display: flex;
  align-items: center;
}

.productDetail
  .productDetailBox
  .detailBox
  .detailList
  .title
  span[data-v-472d0f82] {
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 400;
}

.productDetail
  .productDetailBox
  .detailBox
  .detailList
  .listBox[data-v-472d0f82] {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}

.productDetail
  .productDetailBox
  .detailBox
  .detailList
  .listBox
  .detailItem[data-v-472d0f82] {
  height: 28px;
  margin-right: 36px;
  width: 255px;
  display: flex;
  align-items: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.productDetail
  .productDetailBox
  .detailBox
  .detailList
  .listBox
  .detailItem
  span[data-v-472d0f82],
.productDetail
  .productDetailBox
  .detailBox
  .detailList
  .listBox
  .detailItem
  strong[data-v-472d0f82] {
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 400;
}

.productDetail .productDetailBox .newHot[data-v-472d0f82] {
  width: 350px;
  padding: 0 0 20px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.productDetail .productDetailBox .newHot .newHotRight .title[data-v-472d0f82] {
  margin-bottom: 10px;
}

.productDetail
  .productDetailBox
  .newHot
  .newHotRight
  .title
  strong[data-v-472d0f82] {
  font-size: 16px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 700;
}

.productDetail .productDetailBox .newHot .newHotRight .list[data-v-472d0f82] {
  display: flex;
  flex-wrap: wrap;
}

.productDetail
  .productDetailBox
  .newHot
  .newHotRight
  .list
  .listItem[data-v-472d0f82] {
  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.productDetail
  .productDetailBox
  .newHot
  .newHotRight
  .list
  .listItem[data-v-472d0f82]:nth-child(2n) {
  margin-right: 0;
}

.productDetail
  .productDetailBox
  .newHot
  .newHotRight
  .list
  .listItem
  .topImg[data-v-472d0f82] {
  position: relative;
  width: 157px;
  height: 157px;
}

.productDetail
  .productDetailBox
  .newHot
  .newHotRight
  .list
  .listItem
  .topImg
  .mainPic[data-v-472d0f82] {
  width: 100%;
  height: 100%;
}

.productDetail
  .productDetailBox
  .newHot
  .newHotRight
  .list
  .listItem
  .topImg
  .productName[data-v-472d0f82] {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 42px;
  width: 100%;
  background: rgba(0, 0, 0, 0.65);
  overflow: hidden;
  padding: 3px 4px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 18px;
  color: hsla(0, 0%, 100%, 0.85);
  font-weight: 700;
}

.productDetail
  .productDetailBox
  .newHot
  .newHotRight
  .list
  .listItem
  .singlePrice[data-v-472d0f82] {
  padding: 0 5px;
  font-size: 20px;
  line-height: 25px;
  color: #eb000c;
  font-weight: 700;
}

.productDetail
  .productDetailBox
  .newHot
  .newHotRight
  .list
  .listItem
  .priceText[data-v-472d0f82] {
  padding: 0 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.productDetail
  .productDetailBox
  .newHot
  .newHotRight
  .list
  .listItem
  .priceText
  strong[data-v-472d0f82] {
  font-size: 20px;
  line-height: 25px;
  color: #eb000c;
  font-weight: 700;
}

.productDetail
  .productDetailBox
  .newHot
  .newHotRight
  .list
  .listItem
  .priceText
  .normalText[data-v-472d0f82] {
  font-size: 12px;
  line-height: 16px;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 400;
}

.productDetail
  .productDetailBox
  .newHot
  .newHotRight
  .list
  .listItem
  .priceText
  .largeText[data-v-472d0f82] {
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 400;
}

.productDetail .productDetailBox .newHot .newBox[data-v-472d0f82] {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.productDetail .productDetailBox .newHotWrap[data-v-472d0f82] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.productDetail .productDetailBox .newHotWrap .backTop[data-v-472d0f82] {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #ff97ab;
  border-radius: 2px;
  cursor: pointer;
  margin: 50px 20px;
}

.productDetail
  .productDetailBox
  .newHotWrap
  .backTop
  .topIcon[data-v-472d0f82] {
  font-size: 40px;
  line-height: 1;
  color: #fff;
  font-weight: 400;
}

.productDetail
  .productDetailBox
  .newHotWrap
  .backTop
  .topText[data-v-472d0f82] {
  font-size: 12px;
  line-height: 18px;
  color: #fff;
  font-weight: 400;
}

.numberCount[data-v-34e4c1b9] {
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  width: 70px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}

.numberCount i[data-v-34e4c1b9] {
  color: #606266;
  width: 16px;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  background: #f5f7fa;
  cursor: pointer;
}

.numberCount .left[data-v-34e4c1b9] {
  border-right: 1px solid #dcdfe6;
}

.numberCount .right[data-v-34e4c1b9] {
  border-left: 1px solid #dcdfe6;
}

.numberCount input[data-v-34e4c1b9] {
  outline: none;
  border: none;
  width: 36px;
  line-height: 18px;
  text-align: center;
  box-sizing: border-box;
  font-size: 12px;
  color: #606266;
  padding: 0 8px;
}

.numberCountVertical[data-v-34e4c1b9] {
  display: flex;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.numberCountVertical .countNumInputVer[data-v-34e4c1b9] {
  width: 60px;
  height: 24px;
  box-sizing: border-box;
  border: 1px solid #d5d5d5;
  margin-right: 1px;
  border-radius: 1px;
  text-align: center;
}

.numberCountVertical .countRight[data-v-34e4c1b9] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 24px;
}

.numberCountVertical .countRight i[data-v-34e4c1b9] {
  width: 20px;
  height: 10px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  background: #f6f6f6;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  font-size: 8px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 400;
  cursor: pointer;
}

.numberCountVertical .countRight i[data-v-34e4c1b9]:hover {
  color: #000;
}

.medium[data-v-34e4c1b9] {
  width: 100px;
}

.medium i[data-v-34e4c1b9] {
  width: 26px;
}

.medium i[data-v-34e4c1b9],
.medium input[data-v-34e4c1b9] {
  font-size: 14px;
  line-height: 28px;
}

.medium input[data-v-34e4c1b9] {
  width: 48px;
}
</style>